$back:#ff9344;

@function size($px) {
    @return 100 * $px/750 + vw;
}


@mixin web($w,$h) {
    width: size($w);
    height: size($h);
    margin: 0 auto;
}
.web{
    @include web(750,1600);
    //头部
    header{
        position: fixed;
        top: 0;
        z-index: 99999999999;     
        background-color: white;
        .topbox{
            @include web(750,160);
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        .imglogo img{
            width: size(123);
            height: size(123);
        }

        .chart-box-link{
            display: flex;
            align-items: center;
            position: relative;
        }
        .chart-box-link input{
            @include web(266,51);
            font-size: size(24);
            border-radius: size(20);
            color: gray;
            border: size(2) solid $back;
        }

        .chart-box-link img{
            @include web(29,30);
            position: absolute;
            right: size(15);
        }

        .drop-select select{
            @include web(159,56);
            font-size: size(26);
            border: size(2) solid $back;
            text-indent: 1em;  //文本间距
            border-radius: size(10);
            appearance: none;   //清楚下拉框的倒三角形
            background-image: url(../img/城市切换下拉.png);
            background-repeat: no-repeat;   //背景图片不重复
            background-position: size(113) size(18);    //背景图片定位
            background-size: size(32) size(16);     //背景图片大小
        }
    }

    //主体
    .maincont{
        margin-top: size(160);
        margin-bottom: size(128);
    main{
        .main-principal{
            @include web(750,1085);
        }
        //大盒子包住img轮滚的img
        .swiper-container {
            @include web(750,288);
        }  
        .swiper-slide img{
            @extend .swiper-container;
        }



        .group{
            @include web(720,340);
            margin-top: size(30);
        .groupone{
            display: flex;
            justify-content:space-between;

        }
        .preferential{
                display: flex;
                align-items: center;
                img{
                    width: size(56);
                    height: size(54);
                }
            span{
                font-size: size(30);
                margin-left: size(10);
            }
        }
        .imggd{
            display: flex;
            align-items: center;
            float: right;
            span{
                font-size: size(24);
                margin-right: size(10);
            }
            img{
                @include web(25,26);
            }
        }

        .imgtc{
            @include web(586,220);
            display: flex;
            justify-content: space-evenly;
            .imgtcone{
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                img{
                    @include web(241,94);
                }
            }
            .imgtctwo{
                @extend .imgtcone;
            }
        }
    }

        .yourself{
            @include web(720,500);
            margin-top: size(30);

            .yourselfmian{
                @include web(720,164);
                margin-top: size(30);
                display: flex;
                justify-content: space-between;
                align-items: center;
                line-height:size(39);
                img{
                    width: size(211);
                    height: size(164);
                }
                .yourone{
                    width: size(500);
                    p:first-child{
                        font-size: size(30);
                        font-weight: bold;
                        span{
                            font-size: size(22);
                            color: gray;
                            float: right;
                        }
                    }
                    p:nth-child(2){
                        font-size: size(22);
                        color: gray;
                    } 
                    p:last-child{
                        font-size: size(32);
                        color: $back;
                        span{
                            font-size: size(22);
                            color: gray;
                            float: right;
                        }
                    }
                }
            }
        }
    }
}
    // 底部
    footer{
        @include web(750,128);
         position: fixed;   //固定定位
         bottom: 0;
         background-color: white;
        .homefooter{
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            img{
                width: size(69);
                height: size(66);
                margin-top: size(10);
            }
            a{
                text-decoration: none;
                color: black;
            }
        }
        
        
    }
}
